<template>
  <div class="process-track">
    <div class="process-bar">
      <el-row>
        <el-col :span="6">
          <div class="step-item"
            ref="step1">
            <div class="triangle-right-top"></div>
            <div class="triangle-right-bottom"></div>
            <span class="">一、任务制定</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="step-item"
            ref="step2">
            <div class="triangle-left"></div>
            <div class="triangle-right-top"></div>
            <div class="triangle-right-bottom"></div>
            <span>二、任务下发</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="step-item"
            ref="step3">
            <div class="triangle-left"></div>
            <div class="triangle-right-top"></div>
            <div class="triangle-right-bottom"></div>
            <span>三、任务执行</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="step-item"
            ref="step4">
            <div class="triangle-left"></div>
            <span>四、成果入库</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="jsplumb-wrap">
      <div id="fc-cont">
        <div id="step-01"
          :style="{left: leftArr[0] + 'px'}">任务制定<img src="@/assets/image/icon/icon-done.png"></div>
        <div id="step-02"
          :style="{backgroundColor:ifSend?'#18AD43':'#fff',color:ifSend?'#fff':'#18AD43' , left: leftArr[1]+ 'px'}">
          任务下发<img src="@/assets/image/icon/icon-done.png"
            alt=""
            v-if="ifSend"></div>
        <div class="step-03"
          v-for="(item,index) in nodeData"
          :title="item.label"
          :key="index"
          :id="item.id"
          :style="{backgroundColor:item.status == 1?'#18AD43':'#fff',color:item.status == 1?'#fff':'#18AD43',top:item.top,left: leftArr[2]+ 'px'}">
          {{item.label}}
          <img src="@/assets/image/icon/icon-done.png"
            alt=""
            v-if="item.status == 1?true:false">
        </div>
        <div id="step-no"
          :style="{left: leftArr[2]+ 'px'}"
          v-if="nodeData.length == 0?true:false">暂无数据</div>
        <div id="step-04"
          :style="{left: leftArr[3]+ 'px'}">成果入库（{{finished}}/{{total}}）</div>
      </div>
    </div>
  </div>
</template>

<script>
  import { jsPlumb } from 'jsplumb';
  import config from './config.js';
  import { testdata } from './test.js';
  export default {
    name: 'ProcessTrack',
    data() {
      return {
        step1: '',
        step2: '',
        step3: '',
        step4: '',
        fcdata: {},
        ifSend: true,
        nodeData: [],
        finished: 0, //已完成数量
        total: 0, //总数,
        timer: null,
        leftArr: [40, 40, 40, 40]
      };
    },
    mounted() {
      this.initData();
      this.timer = setTimeout(() => {
        this.initChart();
      }, 200);
    },
    methods: {
      initData() {
        let wrapdom = document.getElementsByClassName('jsplumb-wrap')[0];
        let { width } = wrapdom.getBoundingClientRect();
        let gap = Math.round(width / 4);
        let afterArr = this.leftArr.map((val, i) => val + i * gap);
        this.leftArr = afterArr;

        this.nodeData = testdata;
        this.total = this.nodeData.length;
        this.finished = this.nodeData.filter((item) => item.status === 1).length;
      },
      initChart() {
        let that = this;
        let jpbInst = jsPlumb.getInstance();
        jpbInst.ready(function () {
          console.log('this.jpbInst.ready', jpbInst);
          // 设置容器
          jpbInst.setContainer('fc-cont');
          // 导入默认配置
          jpbInst.importDefaults(config.defaultOpt);

          // 初始化节点(若不经过jsPlumb处理下，没法连线、拖动)
          for (let i = 0; i < that.nodeData.length; i++) {
            let node = that.nodeData[i];
            // 从第二个开始给每个节点设置左锚点，如果不设锚点会默认设置在bottom
            if (i > 0) {
              jpbInst.addEndpoint(
                node.id,
                {
                  anchors: ['Left']
                },
                config.pointOpt
              );
            }
            // 设置可拖拽
            // jpbInst.draggable(node.id, {
            //   containment: 'parent'
            // });
          }

          // 初始化连线
          for (let i = 0; i < that.nodeData.length; i++) {
            let line = that.nodeData[i];
            jpbInst.connect(
              {
                source: line.id,
                target: 'step-04'
              },
              config.connOpt
            );
          }
          for (let i = 0; i < that.nodeData.length; i++) {
            let line = that.nodeData[i];
            jpbInst.connect(
              {
                source: 'step-02',
                target: line.id
              },
              config.connOpt
            );
          }
          jpbInst.connect(
            {
              source: 'step-01',
              target: 'step-02'
            },
            config.connOpt
          );
          jpbInst.connect(
            {
              source: 'step-02',
              target: 'step-no'
            },
            config.connOpt
          );
          jpbInst.connect(
            {
              source: 'step-no',
              target: 'step-04'
            },
            config.connOpt
          );
        });
      }
    },
    beforeDestroy() {
      clearTimeout(this.timer);
    }
  };
</script>

<style scoped lang="scss">
  //流程图边框
  $--flow-border: #18ad43;

  .process-track {
    width: 100%;
    height: 100%;
    .process-bar {
      position: relative;
      width: 100%;
      height: 50px;
      .step-item {
        position: relative;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background-color: $--primary-bg;
        overflow: hidden;
      }
    }
    .jsplumb-wrap {
      width: 100%;
      height: calc(100% - 50px);
      #fc-cont {
        display: flex;
        align-items: center;
        position: relative;
        overflow-y: scroll;
        width: 100%;
        height: 100%;
        #step-no,
        #step-01,
        #step-02,
        #step-04,
        .step-03 {
          position: absolute;
          min-width: 140px;
          padding: 10px 20px;
          border-radius: 3px;
          width: 140px;

          line-height: 30px;
          overflow: initial;
          border: 1px solid $--flow-border;
          text-align: center;
          overflow: hidden; //超出的文本隐藏
          text-overflow: ellipsis; //溢出用省略号显示
          white-space: nowrap; //溢出不换行
          img {
            vertical-align: middle;
            margin-left: 10px;
          }
        }
        #step-no {
          // left: 800px;
          color: $--danger-color;
        }
        #step-01 {
          // left: 40px;
          background-color: $--flow-border;
          color: #fff;
        }
        #step-02 {
          // left: 400px;
        }
        #step-04 {
          // left: 1200px;
          color: $--flow-border;
          padding: 10px 0;
        }
        .step-03 {
          // left: 800px;
          img {
            vertical-align: middle;
            margin-left: 10px;
          }
        }
        .node {
          position: absolute;
          min-width: 140px;
          padding: 10px 20px;
          border-radius: 4px;
          cursor: move;
          overflow: initial;
          border: 1px solid $--flow-border;
          text-align: center;
        }
      }
    }
    .triangle-left {
      position: absolute;
      left: 0;
      top: 0;
      height: 0;
      width: 0;
      border-bottom: 25px solid transparent;
      border-top: 25px solid transparent;
      border-left: 25px solid #fff;
      border-right: 25px solid transparent;
    }
    .triangle-right-top {
      position: absolute;
      right: 0;
      top: -25px;
      height: 0;
      width: 0;
      border-bottom: 25px solid transparent;
      border-top: 25px solid transparent;
      border-left: 25px solid transparent;
      border-right: 25px solid #fff;
    }
    .triangle-right-bottom {
      position: absolute;
      right: 0;
      top: 25px;
      height: 0;
      width: 0;
      border-bottom: 25px solid transparent;
      border-top: 25px solid transparent;
      border-left: 25px solid transparent;
      border-right: 25px solid #fff;
    }
  }
</style>